<template>
  <el-menu
      default-active="0"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"

  >
    <el-menu-item v-for="(page, index) in pageList" :key="page" :index="index.toString()" @click="goTo(page.path)">
      <el-icon><setting /></el-icon>
      <template #title>{{ page.name }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from "vue"
const pageList = [{ name: "检索图书", path: "/Reader/ReaderSearch" },
  { name: "借阅历史", path: "/Reader/ReaderHistory" },
  { name: "个人信息", path: "/Reader/ReaderInfo"}]
const isCollapse = ref(false)
</script>

<script>
import router from "@/router";

export default {
  name: "SideControl",
  data(){
    return{

    }
  },
  methods:{
    goTo(path){
      router.push(path)
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>